<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div>
      <div
        class="ant-form-item ant-form-item-horizontal"
      >
        <div
          class="ant-row ant-form-item-row"
        >
          <div
            class="ant-col ant-form-item-control"
          >
            <div
              class="ant-form-item-control-input"
            >
              <div
                class="ant-form-item-control-input-content"
              >
                <div
                  class="ant-select ant-select-outlined ant-select-in-form-item ant-pro-filed-search-select ant-select-multiple ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
                  style="width: 330px;"
                >
                  <div
                    class="ant-select-selector"
                  >
                    <span
                      class="ant-select-selection-wrap"
                    >
                      <div
                        class="ant-select-selection-overflow"
                      >
                        <div
                          class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
                          style="opacity: 1;"
                        >
                          <div
                            class="ant-select-selection-search"
                            style="width: 0px;"
                          >
                            <input
                              aria-autocomplete="list"
                              aria-controls="name_list"
                              aria-expanded="false"
                              aria-haspopup="listbox"
                              aria-owns="name_list"
                              autocomplete="off"
                              class="ant-select-selection-search-input"
                              id="name"
                              role="combobox"
                              type="search"
                              value=""
                            />
                            <span
                              aria-hidden="true"
                              class="ant-select-selection-search-mirror"
                            >
                               
                            </span>
                          </div>
                        </div>
                      </div>
                      <span
                        class="ant-select-selection-placeholder"
                      >
                        请输入搜索关键字
                      </span>
                    </span>
                  </div>
                  <span
                    aria-hidden="true"
                    class="ant-select-arrow"
                    style="user-select: none;"
                    unselectable="on"
                  >
                    <span
                      aria-label="down"
                      class="anticon anticon-down ant-select-suffix"
                      role="img"
                    >
                      <svg
                        aria-hidden="true"
                        data-icon="down"
                        fill="currentColor"
                        focusable="false"
                        height="1em"
                        viewBox="64 64 896 896"
                        width="1em"
                      >
                        <path
                          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
                        />
                      </svg>
                    </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
      >
        <h4>
          ProFormSelect 搜索值自动清除 Props 说明：
        </h4>
        <ul>
          <li>
            <strong>
              name
            </strong>
            : 字段名
          </li>
          <li>
            <strong>
              placeholder
            </strong>
            : 占位符文本
          </li>
          <li>
            <strong>
              allowClear
            </strong>
            : 是否允许清除
          </li>
          <li>
            <strong>
              width
            </strong>
            : 控件宽度
          </li>
          <li>
            <strong>
              secondary
            </strong>
            : 是否使用次要样式
          </li>
          <li>
            <strong>
              mode
            </strong>
            : 选择模式，'tags' 表示标签模式
          </li>
          <li>
            <strong>
              options
            </strong>
            : 选项数组
          </li>
          <li>
            <strong>
              fieldProps
            </strong>
            : 字段属性配置
          </li>
        </ul>
        <h4>
          fieldProps 配置：
        </h4>
        <ul>
          <li>
            <strong>
              fieldNames
            </strong>
            : 字段名映射配置
          </li>
          <li>
            <strong>
              showSearch
            </strong>
            : 是否显示搜索功能
          </li>
          <li>
            <strong>
              autoClearSearchValue
            </strong>
            : 是否自动清除搜索值
          </li>
        </ul>
        <h4>
          fieldNames 配置：
        </h4>
        <ul>
          <li>
            <strong>
              value
            </strong>
            : 值字段名
          </li>
          <li>
            <strong>
              label
            </strong>
            : 标签字段名
          </li>
          <li>
            <strong>
              options
            </strong>
            : 选项字段名
          </li>
          <li>
            <strong>
              字段映射
            </strong>
            : 将自定义字段名映射为标准字段名
          </li>
        </ul>
        <h4>
          选项配置：
        </h4>
        <ul>
          <li>
            <strong>
              v
            </strong>
            : 选项值
          </li>
          <li>
            <strong>
              l
            </strong>
            : 选项标签
          </li>
          <li>
            <strong>
              自定义字段
            </strong>
            : 使用自定义字段名结构
          </li>
        </ul>
        <h4>
          搜索功能特点：
        </h4>
        <ul>
          <li>
            <strong>
              搜索输入
            </strong>
            : 支持输入关键字进行搜索
          </li>
          <li>
            <strong>
              自动清除
            </strong>
            : 选择后自动清除搜索框的值
          </li>
          <li>
            <strong>
              标签模式
            </strong>
            : 支持多选标签模式
          </li>
          <li>
            <strong>
              字段映射
            </strong>
            : 支持自定义字段名映射
          </li>
        </ul>
        <h4>
          布局特点：
        </h4>
        <ul>
          <li>
            <strong>
              固定宽度
            </strong>
            : 使用固定宽度 330px
          </li>
          <li>
            <strong>
              次要样式
            </strong>
            : 使用次要样式显示
          </li>
          <li>
            <strong>
              响应式设计
            </strong>
            : 自动适配不同屏幕尺寸
          </li>
          <li>
            <strong>
              清晰布局
            </strong>
            : 提供清晰的输入和选择界面
          </li>
        </ul>
        <h4>
          使用场景：
        </h4>
        <ul>
          <li>
            <strong>
              多选搜索
            </strong>
            : 需要多选和搜索功能的场景
          </li>
          <li>
            <strong>
              自定义字段
            </strong>
            : 使用自定义字段名结构的场景
          </li>
          <li>
            <strong>
              自动清除
            </strong>
            : 需要选择后自动清除搜索值的场景
          </li>
          <li>
            <strong>
              标签选择
            </strong>
            : 需要标签形式多选的场景
          </li>
        </ul>
        <h4>
          最佳实践：
        </h4>
        <ul>
          <li>
            <strong>
              字段映射
            </strong>
            : 合理配置字段名映射关系
          </li>
          <li>
            <strong>
              搜索配置
            </strong>
            : 根据需求配置搜索功能
          </li>
          <li>
            <strong>
              自动清除
            </strong>
            : 合理使用自动清除功能
          </li>
          <li>
            <strong>
              用户体验
            </strong>
            : 提供清晰的搜索和选择体验
          </li>
        </ul>
      </div>
    </div>
  </div>
</DocumentFragment>